﻿@page "/components/buttongroup"

<Pager Title="Button Group" Indicates="@(new[]{"Example","Colored","Outline","ToolBar","Size","Vertical"})">
	<Demo Title="Example">
		<Run>
			<ButtonGroup>
				<Button>Left</Button>
				<Button>Middle</Button>
				<Button>Right</Button>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup>
	<Button>Left</Button>
	<Button>Middle</Button>
	<Button>Right</Button>
</ButtonGroup>
```
")
		</Code>
	</Demo>
		<Demo Title="Colored">
		<Run>
			<ButtonGroup>
				<Button Color="Color.Warning">Left</Button>
				<Button Color="Color.Danger">Middle</Button>
				<Button Color="Color.Success">Right</Button>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup>
	<Button Color=""Color.Warning"">Left</Button>
	<Button Color=""Color.Danger"">Middle</Button>
	<Button Color=""Color.Success"">Right</Button>
</ButtonGroup>
```
")
		</Code>
	</Demo>
		<Demo Title="Outline">
		<Run>
			<ButtonGroup>
				<Button Outline>Left</Button>
				<Button Outline>Middle</Button>
				<Button Outline>Right</Button>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup>
	<Button Outline>Left</Button>
	<Button Outline>Middle</Button>
	<Button Outline>Right</Button>
</ButtonGroup>
```
")
		</Code>
	</Demo>
	<Demo Title="ToolBar">
		<Description>
			Set <code>ToolBar</code> outside of <code>ButtonGroup</code> without <code>ToolBar</code>.
		</Description>
			<Run>
				<ButtonGroup ToolBar>
					<ButtonGroup Margin="Margin.Is2.FromRight">
						<Button>1</Button>
						<Button>2</Button>
						<Button>3</Button>
						<Button>4</Button>
						<Button>5</Button>
					</ButtonGroup>
					<ButtonGroup Margin="Margin.Is2.FromRight">
						<Button Color="Color.Secondary">6</Button>
						<Button Color="Color.Secondary">7</Button>
						<Button Color="Color.Secondary">8</Button>
					</ButtonGroup>
					<ButtonGroup Margin="Margin.Is2.FromRight">
						<Button Color="Color.Info">9</Button>
					</ButtonGroup>
				</ButtonGroup>
			</Run>
			<Code>
				@MD.Write(@"
```html
<ButtonGroup ToolBar>
	<ButtonGroup>
		<Button>1</Button>
		<Button>2</Button>
		<Button>3</Button>
		<Button>4</Button>
		<Button>5</Button>
	</ButtonGroup>
	<ButtonGroup>
		<Button Color=""Color.Secondary"">6</Button>
		<Button Color=""Color.Secondary"">7</Button>
		<Button Color=""Color.Secondary"">8</Button>
	</ButtonGroup>
	<ButtonGroup>
		<Button Color=""Color.Info"">9</Button>
	</ButtonGroup>
</ButtonGroup>
```
")
			</Code>
	</Demo>
		<Demo Title="Size">
		<Run>
			<ButtonGroup Size="Size.Small">
				<Button>Left</Button>
				<Button>Middle</Button>
				<Button>Right</Button>
			</ButtonGroup>
			<br />
			<br />
			<ButtonGroup>
				<Button>Left</Button>
				<Button>Middle</Button>
				<Button>Right</Button>
			</ButtonGroup>
			<br />
			<br />
			<ButtonGroup Size="Size.Large">
				<Button>Left</Button>
				<Button>Middle</Button>
				<Button>Right</Button>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup Size=""Size.Small"">
	<Button>Left</Button>
	<Button>Middle</Button>
	<Button>Right</Button>
</ButtonGroup>
<ButtonGroup>
	<Button>Left</Button>
	<Button>Middle</Button>
	<Button>Right</Button>
</ButtonGroup>
<ButtonGroup Size=""Size.Large"">
	<Button>Left</Button>
	<Button>Middle</Button>
	<Button>Right</Button>
</ButtonGroup>
```
")
		</Code>
	</Demo>
		<Demo Title="Vertical">
		<Run>
			<ButtonGroup Vertical>
				<Button>Left</Button>
				<Button>Middle</Button>
				<Button>Right</Button>
				<Button>Top</Button>
				<Button>Center</Button>
				<Button>Bottom</Button>
			</ButtonGroup>
			
			<ButtonGroup Vertical>
				<Button Color="Color.Danger">Radio 1</Button>
				<Button Color="Color.Danger" Outline>Radio 2</Button>
				<Button Color="Color.Danger" Outline>Radio 3</Button>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup Vertical>
	<Button>Left</Button>
	<Button>Middle</Button>
	<Button>Right</Button>
	<Button>Top</Button>
	<Button>Center</Button>
	<Button>Bottom</Button>
</ButtonGroup>

<ButtonGroup Vertical>
	<Button Color=""Color.Danger"" Actived>Radio 1</Button>
	<Button Color=""Color.Danger"" Outline>Radio 2</Button>
	<Button Color=""Color.Danger"" Outline>Radio 3</Button>
</ButtonGroup>
```
")
		</Code>
	</Demo>
</Pager>